<template>
    <div style="display:flex;height:100vh">
<!--    左侧div    -->
        <div :style="{width:is_collapse?'64px':'208px'}">
<!--     菜单       -->
            <el-menu router
            unique-opened
            background-color="#3c82f5"
            text-color="#fff"
            active-text-color="#ff0"
            style="width:100%;height:100%"
            :collapse="is_collapse"
            :collapse-transition="false"
            @select="selectMenu">
<!--       菜单的顶部条       -->
                <el-row>
                    <el-col :span="2"></el-col>
                    <el-col :span="7" style="padding-left: 7px">
                        <el-avatar src="/imgs/admin/logo.png" style="width: 35px;height: 35px;"></el-avatar>
                    </el-col>
                    <el-col :span="is_collapse?0:13">
                        <span style="color: #fff;font-weight: bold;position: relative;top:8px;left: 6px">智慧车辆</span>
                    </el-col>
                </el-row>
<!--        子菜单        -->
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon style="font-size:21px;"><User/></el-icon><span>用户管理</span>
                    </template>
                    <el-menu-item index="/user">用户列表</el-menu-item>

                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon style="font-size:21px;"><Van/></el-icon><span>车辆管理</span>
                    </template>
                    <el-menu-item index="/vehicle">车辆列表</el-menu-item>

                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon style="font-size:21px;"><Files/></el-icon><span>调度管理</span>
                    </template>
                    <el-menu-item index="/application">申请列表</el-menu-item>
                    <el-menu-item index="/audit">调度审核</el-menu-item>
                    <el-menu-item index="/distribute">车辆分配</el-menu-item>

                </el-sub-menu>
                <el-sub-menu index="4">
                    <template #title>
                        <el-icon style="font-size:21px;"><LocationFilled/></el-icon><span>电子围栏</span>
                    </template>
                    <el-menu-item index="/geofence">围栏管理</el-menu-item>

                </el-sub-menu>
                <el-sub-menu index="5">
                    <template #title>
                        <el-icon style="font-size:21px;"><Notebook/></el-icon><span>数据字典</span>
                    </template>
                    <el-menu-item index="/dict">字典管理</el-menu-item>

                </el-sub-menu>

            </el-menu>
        </div>
<!--    右侧    -->
        <div :style="{width:is_collapse?'calc(100% - 64px)':'calc(100% - 208px)'}">
<!--      头部header   -->
            <el-header style="height: 90px;background-color: #fff;padding-top: 22px;">
                <el-row>
                    <el-col :span="18">
                        <el-icon style="font-size: 30px;vertical-align: middle" @click="change_collapse"><Expand/></el-icon><span @click="change_collapse" style="font-size: 16px;color: #666">{{is_coll}}</span>
                    </el-col>
                    <el-col :span="6" style="position:relative">
                        <el-dropdown style="position:absolute;right: 20px;top: 5px;" trigger="click">
                            <span style="font-size: 20px;font-weight: bold">
                                {{user.username}}
                                <el-icon style="vertical-align: middle"><ArrowDownBold/></el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>

                        </el-dropdown>
                    </el-col>
                </el-row>
                <el-breadcrumb separator=">" style="position:relative">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item v-for="item in breadcrumb">{{item}}</el-breadcrumb-item>
                </el-breadcrumb>
            </el-header>
<!--      主体main      -->
            <el-main style="height: calc(100% - 90px);padding: 0;overflow-y: auto">
                <router-view/>
            </el-main>
        </div>
    </div>


</template>

<script setup>

import {ref} from "vue";
import router from "@/router";


const user = ref(getUser())
const is_collapse = ref(false)

const is_coll = ref('折叠')
let map = {
    '/user':['用户管理','用户列表'],
    '/vehicle':['车辆管理','车辆列表'],
    '/application':['调度管理','申请列表'],
    '/audit':['调度管理','调度审核'],
    '/distribute':['调度管理','车辆分配'],
    '/geofence':['电子围栏','围栏管理'],
    '/dict':['数据字典','字典管理']
}
const selectMenu = (index)=>{
    console.log(index)
    breadcrumb.value=map[index]
    localStorage.setItem('breadcrumb',JSON.stringify(breadcrumb.value))
}
const breadcrumb = ref(localStorage.breadcrumb?JSON.parse(localStorage.getItem('breadcrumb')):['用户管理','用户列表'])


const change_collapse = ()=>{
    is_collapse.value=!is_collapse.value
    if(is_collapse.value===true){
        is_coll.value='展开'
    }else{
        is_coll.value='折叠'
    }

}
const logout = ()=>{
    if(confirm('您确认退出吗')){
        localStorage.removeItem('user');
        router.push('/login')
    }

}

</script>
